const Vue = require('vue')
const server = require('express')()
const createSvrApp = require('./src/entry-server')
const renderer = require('vue-server-renderer').createRenderer({
  // 引入页面模板
  template: require('fs').readFileSync('./index.template.html', 'utf-8')
})
server.get('*', (req, res) => {
  const context = { url: req.url }
  const app = createSvrApp(context)

  // "渲染上下文对象"，作为 renderToString 函数的第二个参数，来提供插值数据
  const renderContext = {
    title: 'Hello Vue SSR',
    meta: `
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    `
  }

  // renderer.renderToString
  // 将 Vue 实例渲染为字符串。
  // 上下文对象 (context object) 可选。
  // 回调函数是典型的 Node.js 风格回调，其中第一个参数是可能抛出的错误，第二个参数是渲染完毕的字符串。
  renderer.renderToString(app, renderContext, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
    
    res.end(html)
  })
})

const port = 8080
server.listen(port, () => {
  console.log(`server started at localhost:${port}`)
})